window.onload = function (){
	//初始化购物车数据
	var items = [
		{'序号':'205','商品':'可爱项链漂亮女友节日送礼','单价':11.50,'数量':1,'小计':'&yen11.50','操作':'删除'},
		{'序号':'003','商品':'可爱兔子漂亮女友节日送礼','单价':12.50,'数量':1,'小计':'&yen12.50','操作':'删除'},
		{'序号':'043','商品':'可爱小狗漂亮女友假日送礼','单价':210.50,'数量':1,'小计':'&yen210.50','操作':'删除'},
		{'序号':'676','商品':'对象节日送礼漂亮女生送礼','单价':12.50,'数量':1,'小计':'&yen12.50','操作':'删除'}
	];
	//定义购物车数据库，可以从中添加数据到页面
	var items_backup = [
		{'序号':'205','商品':'可爱项链漂亮女友节日送礼','单价':11.50,'数量':1,'小计':'&yen11.50','操作':'删除'},
		{'序号':'003','商品':'可爱兔子漂亮女友节日送礼','单价':12.50,'数量':1,'小计':'&yen12.50','操作':'删除'},
		{'序号':'043','商品':'可爱小狗漂亮女友假日送礼','单价':210.50,'数量':1,'小计':'&yen210.50','操作':'删除'},
		{'序号':'676','商品':'对象节日送礼漂亮女生送礼','单价':12.50,'数量':1,'小计':'&yen12.50','操作':'删除'},
		{'序号':'901','商品':'你的益达大家的益达很多人','单价':12.50,'数量':1,'小计':'&yen12.50','操作':'删除'},
		{'序号':'902','商品':'你的木糖醇我的木糖醇大家','单价':16.80,'数量':1,'小计':'&yen16.80','操作':'删除'},
		{'序号':'903','商品':'绿箭口香糖让你沁人心脾啊','单价':17.20,'数量':1,'小计':'&yen17.20','操作':'删除'},
		{'序号':'904','商品':'大家都爱吃的巧克力你爱吃','单价':19.40,'数量':1,'小计':'&yen19.40','操作':'删除'}
	];
	//购物车商品序号与图片地址一一对应
	var item_urls = {
		'205':'upload/205.jpg','003':'upload/003.jpg','043':'upload/043.jpg','676':'upload/676.jpg','901':'upload/901.png',
		'902':'upload/902.png','903':'upload/903.png','904':'upload/904.png'
	};
	var cart_div = document.querySelector('.data');//查找存放购物车数据的div
	var table  = document.createElement('table');
	cart_div.appendChild(table);//创建表格元素，并添加到购物车数据的div下
	var tbody = table.createTBody();//创建表格主体部分
	//渲染tfoot最后一行第一个单元格内的内容：全选和反选框
	var selectAll = document.createElement('input');//创建全选按钮
	selectAll.type = 'checkbox';
	var selectInverse = document.createElement('input');//创建反选按钮
	selectInverse.type = 'checkbox';
		
	//渲染tfoot最后一行第二个单元格内的内容：商品件数和总计金额单元格
	var btn_del = document.createElement('button');//创建删除按钮
	btn_del.innerHTML='删除';
	var btn_cancel = document.createElement('button');//创建清除按钮
	btn_cancel.innerHTML='清除';
	var span_qty = document.createElement('span');//创建商品件数span
	span_qty.className = 'qty';
	span_qty.innerHTML='0';
	var span_amount = document.createElement('span');//创建计算总金额span
	span_amount.innerHTML='0';
	span_amount.className='amount';
	//表格tfoot的最后一行添加前面渲染的全选和反选框
	var tfoot = table.createTFoot();
	var tr = tfoot.insertRow();
	var td_choice = tr.insertCell();//在该行内添加全选和反选的单元格
	var td_btn = tr.insertCell();//在该行内添加删除和清除的按钮以及选择商品件数和总计金额
	td_choice.appendChild(selectAll);//把全选按钮添加到单元格里面
	var my_text = document.createTextNode('全选');// 创建文本节点"全选"
	td_choice.appendChild(my_text);//添加文本节点
	td_choice.appendChild(selectInverse);//把反选按钮添加到单元格里面
	my_text = document.createTextNode('反选');// 创建文本节点"反选"
	td_choice.appendChild(my_text);//添加文本节点

	//表格tfoot的最后一行添加前面渲染的数量和总金额元素
	td_btn.appendChild(btn_del);
	td_btn.appendChild(btn_cancel);
	td_btn.appendChild(document.createTextNode('已经选择商品'));
	td_btn.appendChild(span_qty);
	td_btn.appendChild(document.createTextNode('件，共计'));
	td_btn.appendChild(span_amount);
	td_btn.appendChild(document.createTextNode('元'));
	showData(items);//渲染初始化购物车数据  data模块
	//渲染推荐购物数据  recommend 模块
	var recommend_div = document.querySelector('.recommend');//查找存放推荐数据的div
	var ul = document.createElement('ul');//创建ul
	recommend_div.appendChild(ul);//ul添加到推荐数据div中
	for (var i=0;i<items_backup.length;i++) {//循环创建li元素以及内部其它元素
		var li = document.createElement('li');//创建li元素
		var a = document.createElement('a');//创建li中的a元素  用来存放图片和商品描述
		a.href = '#';
		var img = document.createElement('img');//创建图片元素
		img.src = item_urls[items_backup[i]['序号']];//通过序号找到对应图片的url地址
		var p_description = document.createElement('p');//创建商品描述
		p_description.innerHTML = items_backup[i]['商品'];//通过序号找到对应图片的url地址
		var price = document.createElement('h5');//创建价格部分  使用h5标签包裹
		price.innerHTML = '&yen;'+items_backup[i]['单价'];//添加价格
		var btn_add = document.createElement('button');//创建加入购物车按钮
		btn_add.innerHTML = '加入购物车';
		//为每个部分添加子元素
		li.appendChild(a);
		li.appendChild(price);
		li.appendChild(btn_add)
		a.appendChild(img);
		a.appendChild(p_description);
		ul.appendChild(li);
		btn_add.onclick = function(){
			
			function createNewRow(){
				var tr = tbody.insertRow();//创建新的一行
				for (var key in new_item){
					var td = tr.insertCell();//给该行添加单元格
					td.innerHTML=new_item[key];//给该行的每个单元格添加内容，其内容为对象的属性值
				}
				//1.遍历循环创建单元格后，单独处理产品描述单元格的图片
				var item_img = document.createElement('img');//创建img元素
				//通过每个商品的序号在item_urls对象中找到对应地址字符串，为img元素的src属性添加地址
				item_img.src = item_urls[tr.cells[0].innerHTML];
				//找到产品描述单元格内的文本节点
				var item_text = tr.cells[1].childNodes[0];
				//console.log(item_text);
				//将img元素添加在文本节点前
				tr.cells[1].insertBefore(item_img,item_text);
				//为产品描述列添加类名，统一样式
				tr.cells[1].className='td_description';
				//2.单独处理数量所在列
				var input = document.createElement('input');//创建input元素
				var a_minus = document.createElement('a');//创建"-"号a元素
				a_minus.innerHTML='-';
				a_minus.href='javascript:;';
				var a_plus = document.createElement('a');//创建"+"号a元素
				a_plus.innerHTML='+';
				a_plus.href='javascript:;';
				input.value = '1';//设置输入框内的初始值为"1"
				input.type = 'text';//设置输入框为文本输入框
				tr.cells[3].removeChild(tr.cells[3].childNodes[0]);//删除数量单元格原来内容
				//将左右的+-符号和文本输入框添加到该单元格里面
				tr.cells[3].appendChild(a_minus);
				tr.cells[3].appendChild(input);
				tr.cells[3].appendChild(a_plus);
				//3.单独处理操作单元格
				var a_delete = document.createElement('a');//创建"删除"a元素
				a_delete.innerHTML='删除';
				a_delete.href='javascript:;';
				tr.cells[5].removeChild(tr.cells[5].childNodes[0]);//删除操作单元格原来内容
				tr.cells[5].appendChild(a_delete);
				//4.为序号单元格增添checkbox元素对象
				var input_checkbox = document.createElement('input');
				var span_code = document.createElement('span');//为序号增添span标签
				span_code.innerHTML = tr.cells[0].innerHTML;
				input_checkbox.className = 'sub_checkbox';//为复选框添加类名，方便后面选中
				input_checkbox.type = 'checkbox';//设置input属性为复选框
				tr.cells[0].innerHTML='';//序号单元格删除原内容
				tr.cells[0].appendChild(input_checkbox);//序号单元格添加复选框
				tr.cells[0].appendChild(span_code);//序号单元格添加序号
				//在当前行循环内 给"+" "-"符号绑定点击事件
				//为 "-"  绑定点击事件
				a_minus.onclick=function(){//点击"-"，若"-"下面的input内的值不为0，则值递减
					var number=this.nextElementSibling.value;
					if (number!=0){
						number--;
						this.nextElementSibling.value=number;
					}
					var sub_total = this.parentNode.nextElementSibling;//获取"-"所在行的小计单元格
					//将单价单元格内的价格乘以数量的结果赋值给小计单元格内容
					sub_total.innerHTML=
						'&yen'+(parseFloat(this.parentNode.previousElementSibling.innerHTML)*number).toFixed(2);
					checkEveryBox();//选出勾选的商品累加件数和金额
				}
				//为 "+" 绑定点击事件
				a_plus.onclick=function(){//点击"+"，"+"上面的input内的值递增
					var number=this.previousElementSibling.value;
					number++;
					this.previousElementSibling.value=number;
					var sub_total = this.parentNode.nextElementSibling;//获取"+"所在行的小计单元格
					//将单价单元格内的价格乘以数量的结果赋值给小计单元格内容
					sub_total.innerHTML=
						'&yen'+(parseFloat(this.parentNode.previousElementSibling.innerHTML)*number).toFixed(2);
					checkEveryBox();//选出勾选的商品累加件数和金额
				}
				//给操作单元格内的删除元素绑定点击事件
				a_delete.onclick=function(){
					//获取当前需要删除行的下标
					var row_index = this.parentNode.parentNode.rowIndex;
					//console.log(row_index);
					//获得当前行对应商品的序列号
					var id = table.rows[row_index].cells[0].children[1].innerHTML;
					if(confirm('是否删除'+id+'商品')){//若user点击确认则执行删除
						table.deleteRow(row_index);//删除该行
					}
					checkEveryBox();//选出勾选的商品累加件数和金额
				}
			}

			function checkSelectAll(){
				var checkbox_lists = tbody.querySelectorAll('.sub_checkbox');
				//查看全选框状态  并遍历所有复选框，将勾选中的商品数量和小计部分累加然后赋值给对应部分
				var flag = true;//判断是否所有复选框被选中
				for (var i=0,num=0,total=0,len=checkbox_lists.length;i<len;i++){
					//如果遍历到复选框没有选中，flag改为false
					if (!(checkbox_lists[i].checked)){
						flag=false;
					}else{//将选中的复选框所在行的小计部分累加，并计算有几件商品被选中
						 //小计部分累加
						total+=parseFloat(checkbox_lists[i].parentNode.parentNode.cells[4].innerHTML.slice(1));
						num+=parseFloat(checkbox_lists[i].parentNode.parentNode.cells[3].children[1].value);
					}
				}
				selectAll.checked = flag;//把选中状态给全选复选框
				span_amount.innerHTML=total.toFixed(2).toString();//将计算后的结果赋值给总计
				span_qty.innerHTML=num.toString();//商品数量赋值给商品件数
			}
			//获取当前被点击按钮所在li内部的img元素的地址
			var addr = this.parentNode.getElementsByTagName('img')[0].src.slice(-14);
			function getKey(){//定义函数 返回当前图片url地址对应的序号
				for(var key in item_urls){
					if(item_urls[key]==addr){
						return key;
					}
				}
			}
			for (var i=0,new_item=null;i<items_backup.length;i++) {//遍历购物车数据库，寻找序号对应的值与getKey()相等的元素
				if(items_backup[i]['序号']==getKey()){
					new_item=items_backup[i];//将对应的产品对象赋值给new_item
					//console.log(new_item);
					createNewRow();//在tbody中创建新的一行
					//添加行后  再为每个复选框绑定点击事件
					var checkbox_lists = tbody.querySelectorAll('.sub_checkbox');
					for (var i=0;i<checkbox_lists.length;i++){
						checkbox_lists[i].onclick = function(){
							checkSelectAll();//查看全选框状态，并将勾选的复选框内的商品数量和金额累加
						}
					}
					break;
				}
			}
		}
	}

	function showData(items){
		var thead = table.createTHead();//创建表格表头
		var tr = thead.insertRow();//在表头中创建单行
		for (var key in items[0]){//遍历items数组首个对象的属性
			var th = document.createElement('th');//有几个属性就创建几个表头单元格
			tr.appendChild(th);//在行内添加每个单元格
			th.innerHTML=key;//在单元格内添加内容
		}
		
		for (var i=0,len=items.length;i<len;i++){
			var tr = tbody.insertRow();//items内有几个对象，就创建几行
			for (var key in items[i]){
				var td = tr.insertCell();//给每行添加单元格
				td.innerHTML=items[i][key];//给每行的每个单元格添加内容，其内容为对象的属性值
			}
			//1.遍历循环创建单元格后，单独处理产品描述单元格的图片
			var item_img = document.createElement('img');//创建img元素
			//通过每个商品的序号在item_urls对象中找到对应地址字符串，为img元素的src属性添加地址
			item_img.src = item_urls[tr.cells[0].innerHTML];
			//找到产品描述单元格内的文本节点
			var item_text = tr.cells[1].childNodes[0];
			//console.log(item_text);
			//将img元素添加在文本节点前
			tr.cells[1].insertBefore(item_img,item_text);
			//为产品描述列添加类名，统一样式
			tr.cells[1].className='td_description';
			//2.单独处理数量所在列
			var input = document.createElement('input');//创建input元素
			var a_minus = document.createElement('a');//创建"-"号a元素
			a_minus.innerHTML='-';
			a_minus.href='javascript:;';
			var a_plus = document.createElement('a');//创建"+"号a元素
			a_plus.innerHTML='+';
			a_plus.href='javascript:;';
			input.value = '1';//设置输入框内的初始值为"1"
			input.type = 'text';//设置输入框为文本输入框
			tr.cells[3].removeChild(tr.cells[3].childNodes[0]);//删除数量单元格原来内容
			//将左右的+-符号和文本输入框添加到该单元格里面
			tr.cells[3].appendChild(a_minus);
			tr.cells[3].appendChild(input);
			tr.cells[3].appendChild(a_plus);
			//3.单独处理操作单元格
			var a_delete = document.createElement('a');//创建"删除"a元素
			a_delete.innerHTML='删除';
			a_delete.href='javascript:;';
			tr.cells[5].removeChild(tr.cells[5].childNodes[0]);//删除操作单元格原来内容
			tr.cells[5].appendChild(a_delete);
			//4.为序号单元格增添checkbox元素对象
			var input_checkbox = document.createElement('input');
			var span_code = document.createElement('span');//为序号增添span标签
			span_code.innerHTML = tr.cells[0].innerHTML;
			input_checkbox.className = 'sub_checkbox';//为复选框添加类名，方便后面选中
			input_checkbox.type = 'checkbox';//设置input属性为复选框
			tr.cells[0].innerHTML='';//序号单元格删除原内容
			tr.cells[0].appendChild(input_checkbox);//序号单元格添加复选框
			tr.cells[0].appendChild(span_code);//序号单元格添加序号
			//在当前行循环内 给"+" "-"符号绑定点击事件
			//为 "-"  绑定点击事件
			a_minus.onclick=function(){//点击"-"，若"-"下面的input内的值不为0，则值递减
				var number=this.nextElementSibling.value;
				if (number!=0){
					number--;
					this.nextElementSibling.value=number;
				}
				var sub_total = this.parentNode.nextElementSibling;//获取"-"所在行的小计单元格
				//将单价单元格内的价格乘以数量的结果赋值给小计单元格内容
				sub_total.innerHTML=
					'&yen'+(parseFloat(this.parentNode.previousElementSibling.innerHTML)*number).toFixed(2);
				checkEveryBox();//选出勾选的商品累加件数和金额
			}
			//为 "+" 绑定点击事件
			a_plus.onclick=function(){//点击"+"，"+"上面的input内的值递增
				var number=this.previousElementSibling.value;
				number++;
				this.previousElementSibling.value=number;
				var sub_total = this.parentNode.nextElementSibling;//获取"+"所在行的小计单元格
				//将单价单元格内的价格乘以数量的结果赋值给小计单元格内容
				sub_total.innerHTML=
					'&yen'+(parseFloat(this.parentNode.previousElementSibling.innerHTML)*number).toFixed(2);
				checkEveryBox();//选出勾选的商品累加件数和金额
			}
			//给操作单元格内的删除元素绑定点击事件
			a_delete.onclick=function(){
				//获取当前需要删除行的下标
				var row_index = this.parentNode.parentNode.rowIndex;
				//console.log(row_index);
				//获得当前行对应商品的序列号
				var id = table.rows[row_index].cells[0].children[1].innerHTML;
				if(confirm('是否删除'+id+'商品')){//若user点击确认则执行删除
					table.deleteRow(row_index);//删除该行
				}
				checkEveryBox();//选出勾选的商品累加件数和金额
				
				
			}
				
		}
			
		//为全选复选框绑定点击事件
		//功能1 选中全选复选框时，上面所有复选框都是选中状态
		selectAll.onclick = function(){
			//获取每行的checkbox集合
			var checkbox_lists = tbody.querySelectorAll('.sub_checkbox');
			for (var i=0,num=0,total=0,len=checkbox_lists.length;i<len;i++){
				//每个复选框的选中状态与全选复选框状态一致
				checkbox_lists[i].checked=this.checked;
				if(this.checked){//勾选的复选框需要取出每个小计的数字部分累加
					total+=parseFloat(checkbox_lists[i].parentNode.parentNode.cells[4].innerHTML.slice(1));
					num+=parseFloat(checkbox_lists[i].parentNode.parentNode.cells[3].children[1].value);
				}
					
			}
			span_qty.innerHTML=num.toString();
			span_amount.innerHTML = total.toString();
		}
		//功能2 上面所有复选框 （循环绑定） 选中时，全选复选框自动勾选
		//每点击一次上面的复选框都查看是否全部复选框已选中
		var checkbox_lists = tbody.querySelectorAll('.sub_checkbox');
		for (var i=0;i<checkbox_lists.length;i++){
			checkbox_lists[i].onclick = function(){
				checkSelectAll();//查看全选框状态，并将勾选的复选框内的商品数量和金额累加
			}
		}
		//为反选复选框绑定点击事件
		selectInverse.onclick = function(){
			var checkbox_lists = tbody.querySelectorAll('.sub_checkbox');
			if (this.checked){
				for (var i=0,len=checkbox_lists.length;i<len;i++){
					//循环遍历每个复选框，将相反值给到其原来的选中状态
					checkbox_lists[i].checked=!(checkbox_lists[i].checked);
				}
			}
			checkSelectAll();//查看全选框状态，并将勾选的复选框内的商品数量和金额累加
		}
		//为删除按钮绑定点击事件
		btn_del.onclick = function (){
			var checkbox_lists = tbody.querySelectorAll('.sub_checkbox');
			for (var i=0,ids=[],len=checkbox_lists.length;i<len;i++){
				if (checkbox_lists[i].checked){//删除复选框被选中的行
					var row_index=checkbox_lists[i].parentNode.parentNode.rowIndex;//获取行下标
					var id = checkbox_lists[i].parentNode.children[1].innerHTML;//获取商品序号
					if(confirm('是否删除'+id+'商品')){//点击确认则执行删除操作
						table.deleteRow(row_index);
					}
				}
			}
			checkEveryBox();//查看tbody的每个复选框的状态并将勾选中的商品数量和小计部分累加然后赋值给对应部分
		}
		//为清除按钮绑定点击事件
		btn_cancel.onclick = function (){//清空购物车数据 删除tbody的所有行
			for(var i=0,len=tbody.rows.length;i<len;i++){
				//tbody.removeChild(tbody.rows[tbody.rows.length-1]);//每次删除最后一行
				tbody.deleteRow(tbody.rows.length-1);
			}
			span_qty.innerHTML=0;
			span_amount.innerHTML=0;
		}
		
		//内部函数声明
		function checkSelectAll(){
			var checkbox_lists = tbody.querySelectorAll('.sub_checkbox');
			//查看全选框状态  并遍历所有复选框，将勾选中的商品数量和小计部分累加然后赋值给对应部分
			var flag = true;//判断是否所有复选框被选中
			for (var i=0,num=0,total=0,len=checkbox_lists.length;i<len;i++){
				//如果遍历到复选框没有选中，flag改为false
				if (!(checkbox_lists[i].checked)){
					flag=false;
				}else{//将选中的复选框所在行的小计部分累加，并计算有几件商品被选中
					 //小计部分累加
					total+=parseFloat(checkbox_lists[i].parentNode.parentNode.cells[4].innerHTML.slice(1));
					num+=parseFloat(checkbox_lists[i].parentNode.parentNode.cells[3].children[1].value);
				}
			}
			selectAll.checked = flag;//把选中状态给全选复选框
			span_amount.innerHTML=total.toFixed(2).toString();//将计算后的结果赋值给总计
			span_qty.innerHTML=num.toString();//商品数量赋值给商品件数
		}
	}

	//外部函数声明部分
	//查看tbody的每个复选框的状态并将勾选中的商品数量和小计部分累加然后赋值给对应部分
	function checkEveryBox(){
		//遍历tbody里所有的行，获得小计里面的内容
		for (var i=0,num=0,len=tbody.rows.length,total=0;i<len;i++){
				//如果该行第一个单元格里的复选框是勾选状态，则取出小计部分的数字累加
				if (tbody.rows[i].cells[0].children[0].checked){
					//取出数字部分累加
					total+=parseFloat(tbody.rows[i].cells[4].innerHTML.slice(1));
					//取出商品数量累加
					num+=parseFloat(tbody.rows[i].cells[3].children[1].value);
				}
		}
		span_amount.innerHTML=total.toFixed(2).toString();//将计算后的结果赋值给总计
		span_qty.innerHTML=num.toString();//将计算后的结果赋值给商品件数
	}
}
// 控制recommend模块中的ul左右移动的函数
function moving(arrow){
	var ul = arrow.parentNode.parentNode.children[3];//获取recommend模块中的ul
	if(arrow.innerHTML=='&lt;'){//判断箭头的方向
		ul.style.left = (ul.offsetLeft + 250>0)?0+ 'px':ul.offsetLeft + 250 + 'px';	//若增加后的left值大于0则赋值为0
	}else if(arrow.innerHTML=='&gt;'){
		//若减少后的left值小于-1000则赋值为-1000
		ul.style.left = (ul.offsetLeft - 250<-1000)?-1000+ 'px':ul.offsetLeft - 250 + 'px';
	}
}